import { IFormProps, size, dateFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import moment from 'moment';
import { Form, Row, Col, Table, Button, Input, Select, message } from 'antd';
import { PaginationProps } from "antd/lib/pagination";
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';
import queryString from 'query-string';

export interface IUserDividenDetailProps extends IFormProps {
    user: any
}
class UserDividenDetail extends React.PureComponent<IUserDividenDetailProps, any>{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        const { id } = queryString.parse(this.props.location.search);
        this.getUserDividends({ userId: id });
    }
    getUserDividends = (payload?) => {
        if (!payload) {
            payload = this.props.user.userDividendsSearchs;
        }
        else {
            payload = Object.assign({}, this.props.user.userDividendsSearchs, payload);
        }
        this.props.dispatch({
            type: "user/getUserDividends",
            payload
        });
    }
    reset = () => {
        this.props.form.resetFields();
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const { userDividends: { totalCount, items }, userDividendsSearchs: { pageIndex, pageSize, userId } } = this.props.user;
        const pageChange = (pageIndex, pageSize) => {
            let payload = Object.assign({},
                this.props.user.userDividendsSearchs,
                { pageIndex, pageSize, userId });
            this.getUserDividends(payload);
        }
        const pagination: PaginationProps | boolean = {
            total: totalCount,
            defaultCurrent: 1,
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            showQuickJumper: true,
            pageSizeOptions: ["10", "20", "30", "50"],
            onShowSizeChange: pageChange,
            onChange: pageChange
        };
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>当前分红记录列表(共 {totalCount} 条)</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={items}
                                bordered
                                pagination={pagination}
                                rowKey={(record: api.SingleUserMallUsersVOUserDividendVO) => String(record.id)}
                                loading={loading}
                            >
                                
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return (pageIndex - 1) * pageSize + index + 1
                                }} />
                                <Table.Column title="头像" key="avatar" render={(text, record: api.SingleUserMallUsersVOUserDividendVO, index) => {
                                    return record.avatar && <img width='80px' src={record.avatar} />
                                }} />
                                <Table.Column title="用户名称" key="name" dataIndex="name" />
                                <Table.Column title="商品期数" key="numberPeriods" dataIndex="numberPeriods"/>
                                <Table.Column title="商品名称" key="itemName" dataIndex="itemName" />
                                <Table.Column title="购买金额" key="amount" dataIndex="amount" />
                                <Table.Column title="期限（月）" key="timelimit" dataIndex="timelimit" />
                                <Table.Column title="分红比列（%）" key="dividendAmountView" dataIndex="dividendAmountView" />
                                <Table.Column title="获得利润" key="profit" dataIndex="profit" />
                                <Table.Column title="分红天数" key="dividendDay" dataIndex="dividendDay" className={Styles.redColor} />
                                <Table.Column title="支付时间" key="payTime" render={(text, record: api.SingleUserMallUsersVOUserDividendVO, index) => {
                                    return moment(record.payTime).format(dateFormat)
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>
            </Row>)
    }
}
export default connect(({ user, loading: { models: { user: loading } } }) => ({ user, loading }))(Form.create()(UserDividenDetail));
